/*
 * Create:      柿子
 * CreateDate:  2023/10/31
 * Describe：   床位图图标设置
 * */
import React, { Component } from 'react';
import { Tooltip, Icon } from 'antd';

class BedItem extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  handleRenderIcon = (iconData = [], ellipsisNum) => {
    let renderIcon = iconData && Array.isArray(iconData) ? JSON.parse(JSON.stringify(iconData)) : [];
    let ellipsisFlag = 'N'
    if (iconData && Array.isArray(iconData) && iconData.length > ellipsisNum) {
      renderIcon = renderIcon.slice(0, ellipsisNum);
      ellipsisFlag = 'Y';
    }
    return renderIcon && renderIcon.map((item, index) => {
      return (
        <span
          key={index}
          className={['span-color-border', ellipsisFlag === 'Y' && ellipsisNum && index === ellipsisNum - 1 ? '' : 'bed-item-keywords-icon'].join(' ')}
          style={{ color: ellipsisFlag === 'Y' && ellipsisNum && index === ellipsisNum - 1 ? '' : (item?.color || ''), cursor: 'pointer' }}
        >
          {ellipsisFlag === 'Y' && ellipsisNum && index === ellipsisNum - 1 ? <Icon type="ellipsis" /> : (item?.title || '无')}
        </span>
      )
    })
  }

  render() {
    const { style, bedInfo, rowData } = this.props;
    const headerIcon = bedInfo?.headerIcon || []; // 床位图头部icon
    const patName = bedInfo?.patName || '';
    const roomDesc = bedInfo?.roomDescripts || ''; // 床位所属房间
    const bedCode = bedInfo?.bedCode || '';

    return (
      <div
        style={{ ...style }}
        className={['bed-item', rowData && 'id' in rowData && String(rowData?.id) === String(bedInfo?.id) ? 'bed-item-active' : ''].join(' ')}
        onClick={this.props?.onClick || null}
      >
        <div
          style={{ background: bedInfo?.headerBg || '#00ffff' }}
          className="bed-item-header flex-between-center"
        >
          {/* 床号 */}
          <div
            style={{ fontSize: (roomDesc?.length || 0) + (bedCode?.length || 0) > 6 ? '12px' : '' }}
            className="bed-item-header-room two-lines-ellipsis"
          >
            {(roomDesc ? (roomDesc + '-') : '') + bedCode}
          </div>
          {/* 姓名 */}
          <div
            style={{ width: `calc(100% - ${patName?.length > 4 ? (headerIcon && headerIcon.length > 3 ? '122px' : '140px') : '156px'})`, fontSize: patName?.length > 4 ? '12px' : '' }}
            className="bed-item-header-name two-lines-ellipsis">
            {patName}
          </div>
          <div
            style={{
              width: patName?.length > 4 ? (headerIcon && headerIcon.length > 3 ? '38px' : '56px') : '74px',
              paddingLeft: headerIcon && (headerIcon.length > 3 || (headerIcon && headerIcon.length === 3 && patName?.length > 4)) ? '2px' : '',
              justifyContent: headerIcon && (headerIcon.length > 3 || (headerIcon && headerIcon.length === 3 && patName?.length > 4)) ? '' : 'flex-end'
            }}
            className={['bed-item-header-icon', 'flex-wrap-align-items', headerIcon && (headerIcon.length > 3 || (headerIcon && headerIcon.length === 3 && patName?.length > 4)) ? 'bed-item-mini-icon' : ''].join(' ')}
          >
            {/* 床位顶部图标 */}
            {this.handleRenderIcon(headerIcon, patName?.length > 4 ? 4 : (patName?.length < 4 && headerIcon && headerIcon.length > 8 ? 8 : ''))}
          </div>
        </div>
        <div className="bed-item-content">
          <div>
            <div className="bed-item-content-icon">
              <i
                style={{ fontSize: '24px', color: bedInfo?.patSexDesc === '男' ? '#007AFF' : (bedInfo?.patSexDesc === '女' ? '#f759ab' : '') }}
                className={bedInfo?.patSexDesc === '男' ? 'iconfont icon-boys' : (bedInfo?.patSexDesc === '女' ? 'iconfont icon-girl' : 'iconfont icon-both-sex')}
              ></i>
            </div>
            <div className="bed-item-content-first-title bed-item-content-title">
              <div>
                <span>{bedInfo?.patNo || ''}</span>
                <span style={{ margin: '0 8px' }}>{bedInfo?.patSexDesc || ''}</span>
                <span>{bedInfo?.patAge || ''}</span>
              </div>
              <div>
                {/* 费别 */}
                {bedInfo?.admReasonDesc || ''}
              </div>
            </div>
          </div>
          <div>
            <div className="bed-item-content-icon">
              <i className="iconfont icon-doctor"></i>
            </div>
            <div className="bed-item-content-title">
              {/* 责医 */}
              {bedInfo?.admDocDesc || ''}
            </div>
          </div>
          <div>
            <div className="bed-item-content-icon">
              <i className="iconfont icon-nurse"></i>
            </div>
            <div className="bed-item-content-title">
              {/* 责护 */}
              {bedInfo?.admNurDesc || ''}
            </div>
          </div>
          <div>
            <div className="bed-item-content-icon">
              <i className="iconfont icon-time"></i>
            </div>
            <div className="bed-item-content-title">
              <span className="common-number">{bedInfo?.patMedicalNo || ''}</span>
              <span style={{ margin: '0 8px' }}>12-12 12:00入院</span>
              <span className="common-number">{bedInfo?.admInDays || ''}</span>
              天
            </div>
          </div>
          <div>
            <div style={{ paddingLeft: '2px' }} className="bed-item-content-icon">
              <i style={{ fontSize: '16px' }} className="iconfont icon-diag"></i>
            </div>
            <div className="bed-item-content-title ellipsis">
              <Tooltip placement="topLeft" title={bedInfo?.admDiag || ''}>
                {bedInfo?.admDiag || ''}
              </Tooltip>
            </div>
          </div>
        </div>
        <div className="bed-item-footer flex-wrap-align-items">
          {bedInfo && 'footerIconData' in bedInfo && Array.isArray(bedInfo.footerIconData) ? this.handleRenderIcon(bedInfo.footerIconData) : <span style={{ color: '#999', fontSize: '12px' }}>暂无信息</span>}
        </div>
      </div >
    )
  }
};

export default BedItem;